<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/common.html::common_css">
</head>
<script type="text/javascript" th:src="@{/static/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/static/js/jquery-3.1.1.js}"></script>
<style>
    p {
        margin-left: 5px;
    }
    p label {
        width: 90%;
        height: 100%;
        /*float: right;*/
    }
    .shad {
        margin-right: 30%;
        height: 20px;
    }
    .shad:hover {
        box-shadow: 10px 10px 10px 10px #888888;
    }
    .l {
        margin-left: 30%;
    }
    #msg{
        position: fixed;
        display:none;
        left:40%;
        top:20%;
        z-index:11;
    }

    #finexam{
        position: fixed;
        display:none;
        left:40%;
        top:20%;
        z-index:11;
    }

    #popLayer {
        top: -66px;
        position: fixed;
        width: 100%;
        height: 120%;
        display: none;
        z-index: 10;
        background: #222;
        -moz-opacity: 0.8;
        opacity: .80;
        filter: alpha(opacity=80);
    }
</style>
<script type="text/javascript" th:src="@{/static/js/exam.js}"></script>
<body>
<div id="popLayer" >
</div>
<div id="msg" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true" class="text-left" style="position: center">
        <div role="document" class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" style="margin-left: 20px;margin-right: 20px">
                    <h5 id="exampleModalLabel1" class="modal-title">考试时间结束！系统将会自动提交试卷!</h5>
                </div>
                <div class="modal-footer"
                     style="display: block;padding: 1rem;text-align: center;margin-left: 20px;margin-right: 20px">
                    <button id="btn" type="button" onclick="closeBox()" class="btn btn-primary">确定
                    </button>
                </div>
            </div>
        </div>
    </div>
<div id="finexam" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true" class="text-left" style="position: center">
    <div role="document" class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="margin-left: 20px;margin-right: 20px">
                <h5 id="exampleModalLabel" class="modal-title">考试时间尚未结束，确定要交卷吗？</h5>
            </div>

            <div class="modal-footer"
                 style="display: block;padding: 1rem;text-align: center;margin-left: 20px;margin-right: 20px">
                <button id="cancel" type="button" class="btn btn-secondary" onclick="cancelBox()">
                    取消
                </button>
                <button id="confirm" type="button" class="btn btn-primary" onclick="comfirmBox()"
                        style="margin-left: 100px">确定
                </button>
            </div>
        </div>
    </div>
</div>
<div  class="page" style="width: 100%;background:url('/static/img/bg/3.jpg') center center;background-size: cover">
    <div th:replace="common/common.html::common_navbar"></div>
    <section>
        <div class="container-fluid">
            <!-- Page Header-->
            <header>
                <h1 class="h3 display">考试</h1>
            </header>
            <div class="row">
                <div class="col-lg-6" style="flex:100%;max-width: 100%;">
                    <form th:action="@{/student/reachresult.html}" method="post" name="examform">
                        <input type="hidden" name="testpaperid" th:value="${testpaper.testpaperid}">
                        <div class="form-group-material" style="text-align: center">
                            <label style="color: #aaaaaa;" class="label-material">试卷名称</label>
                            <p th:text="${testpaper.testpapername}">
                        </div>
                        <div class="form-group-material" style="text-align: center">
                        <span>
                        <label class="label-material"
                               style="color: #aaaaaa;">部门</label>
                        <p th:text="${testpaper.apartmentname}"></p>
                        </span>
                            <span>
                        <label class="label-material"
                               style="color: #aaaaaa;">试卷类型</label>
                        <p th:if="${testpaper.type}">固定组卷</p>
                        <p th:if="${not testpaper.type}">随机组卷</p>
                        </span>
                        </div>
                        <div class="form-group-material" style="text-align: center">
                            <input id="timelimt" type="hidden" th:value="${testpaper.timelimt}"/>
                            <span>
                            <p th:text="'考试时长: '+${testpaper.timelimt}+'分钟'">
                            </span>
                            <span>
                                <p>剩余时间: <span id="curtime"></span></p>
                            </span>
                        </div>
                        <div class="form-group-material" id="testcontent">
                            <h4 class="label-material l"
                                style="color: #aaaaaa;">试卷内容</h4>
                            <table class="table">
                                <tbody>
                                <th:block th:if="${Squestions.size() != 0}">
                                    <tr>
                                        <td>
                                            <h5 class="label-material l">单 选 题</h5>
                                        </td>
                                    </tr>
                                    <tr th:each="question,questionStat:${Squestions}">
                                        <td>
                                            <div class="form-group-material l">
                                                <label class="label-material"
                                                       th:text="${questionStat.index+1}+'、'+${question.content}"></label>
                                                <p class="shad" th:if="${(question.optionA!= null and (not question.optionA.equals('')))}">
                                                    <input th:id="${question.questionid}+'SA'" type="radio"
                                                           th:name="${question.questionid}"
                                                           data-msg="请作答" th:value="A">
                                                    <label th:for="${question.questionid}+'SA'"
                                                           th:text="'A、'+${question.optionA}"></label>
                                                </p>
                                                <p class="shad" th:if="${(question.optionB!= null and (not question.optionB.equals('')))}">
                                                    <input th:id="${question.questionid}+'SB'" type="radio"
                                                           th:name="${question.questionid}"
                                                           data-msg="请作答" th:value="B">
                                                    <label th:for="${question.questionid}+'SB'"
                                                           th:text="'B、'+${question.optionB}"></label>
                                                </p>
                                                <p class="shad" th:if="${(question.optionC!= null and (not question.optionC.equals('')))}">
                                                    <input th:id="${question.questionid}+'SC'" type="radio"
                                                           th:name="${question.questionid}"
                                                           data-msg="请作答" th:value="C">
                                                    <label th:for="${question.questionid}+'SC'"
                                                           th:text="'C、'+${question.optionC}"></label>
                                                </p>
                                                <p class="shad" th:if="${(question.optionD!= null and (not question.optionD.equals('')))}">
                                                    <input th:id="${question.questionid}+'SD'" type="radio"
                                                           th:name="${question.questionid}"
                                                           data-msg="请作答" th:value="D">
                                                    <label th:for="${question.questionid}+'SD'"
                                                           th:text="'D、'+${question.optionD}"></label>
                                                </p>
                                                <p class="shad" th:if="${(question.optionE!= null and (not question.optionE.equals('')))}">
                                                    <input th:id="${question.questionid}+'SE'" type="radio"
                                                           th:name="${question.questionid}"
                                                           data-msg="请作答" th:value="E">
                                                    <label th:for="${question.questionid}+'SE'"
                                                           th:text="'E、'+${question.optionE}"></label>
                                                </p>
                                                <p class="shad" th:if="${(question.optionF!= null and (not question.optionF.equals('')))}">
                                                    <input th:id="${question.questionid}+'SF'" type="radio"
                                                           th:name="${question.questionid}"
                                                           data-msg="请作答" th:value="F">
                                                    <label th:for="${question.questionid}+'SF'"
                                                           th:text="'F、'+${question.optionF}"></label>
                                                </p>
                                            </div>
                                        </td>
                                    </tr>
                                </th:block>
                                <th:block th:if="${Mquestions.size() != 0}">
                                    <tr>
                                        <td>
                                            <h5 class="label-material l">多 选 题</h5>
                                        </td>
                                    </tr>
                                    <tr th:each="question,questionStat:${Mquestions}">
                                        <td>
                                            <div class="form-group-material l">
                                                <label class="label-material"
                                                       th:text="${questionStat.index+1}+'、'+${question.content}"></label>
                                                <p class="shad" th:if="${(question.optionA!= null and (not question.optionA.equals('')))}">
                                                    <input th:id="${question.questionid}+'MA'" type="checkbox"
                                                           th:name="${question.questionid}" th:value="A">
                                                    <label th:for="${question.questionid}+'MA'"
                                                           th:text="'A、'+${question.optionA}"></label>
                                                </p>
                                                <p class="shad" th:if="${(question.optionB!= null and (not question.optionB.equals('')))}">
                                                    <input th:id="${question.questionid}+'MB'" type="checkbox"
                                                           th:name="${question.questionid}" th:value="B">
                                                    <label th:for="${question.questionid}+'MB'"
                                                           th:text="'B、'+${question.optionB}"></label>
                                                </p>
                                                <p class="shad" th:if="${(question.optionC!= null and (not question.optionC.equals('')))}">
                                                    <input th:id="${question.questionid}+'MC'" type="checkbox"
                                                           th:name="${question.questionid}" th:value="C">
                                                    <label th:for="${question.questionid}+'MC'"
                                                           th:text="'C、'+${question.optionC}"></label>
                                                </p>
                                                <p class="shad" th:if="${(question.optionD!= null and (not question.optionD.equals('')))}">
                                                    <input th:id="${question.questionid}+'MD'" type="checkbox"
                                                           th:name="${question.questionid}" th:value="D">
                                                    <label th:for="${question.questionid}+'MD'"
                                                           th:text="'D、'+${question.optionD}"></label>
                                                </p>
                                                <p class="shad" th:if="${(question.optionE!= null and (not question.optionE.equals('')))}">
                                                    <input th:id="${question.questionid}+'ME'" type="checkbox"
                                                           th:name="${question.questionid}" th:value="E">
                                                    <label th:for="${question.questionid}+'ME'"
                                                           th:text="'E、'+${question.optionE}"></label>
                                                </p>
                                                <p class="shad" th:if="${(question.optionF!= null and (not question.optionF.equals('')))}">
                                                    <input th:id="${question.questionid}+'MF'" type="checkbox"
                                                           th:name="${question.questionid}" th:value="F">
                                                    <label th:for="${question.questionid}+'MF'"
                                                           th:text="'F、'+${question.optionF}"></label>
                                                </p>
                                            </div>
                                        </td>
                                    </tr>
                                </th:block>
                                <th:block th:if="${Jquestions.size()!=0}">
                                    <tr>
                                        <td>
                                            <h5 class="label-material l">判 断 题</h5>
                                        </td>
                                    </tr>
                                    <tr th:each="question,questionStat:${Jquestions}">
                                        <td>
                                            <div class="form-group-material l">
                                                <label class="label-material"
                                                       th:text="${questionStat.index+1}+'、'+${question.content}"></label>
                                                <p class="shad">
                                                    <input th:id="${question.questionid}+'JT'" type="radio"
                                                           th:name="${question.questionid}"
                                                           data-msg="请作答" th:value="1">
                                                    <label th:for="${question.questionid}+'JT'">正 确</label>
                                                </p>
                                                <p class="shad">
                                                    <input th:id="${question.questionid}+'JF'" type="radio"
                                                           th:name="${question.questionid}"
                                                           data-msg="请作答" th:value="0">
                                                    <label th:for="${question.questionid}+'JF'">错 误</label>
                                                </p>
                                            </div>
                                        </td>
                                    </tr>
                                </th:block>
                                </tbody>
                            </table>
                            <input type="hidden" name="check" value="-1">
                        </div>
                        <div class="form-group text-center">
                            <button id="sub" type="button" class="btn btn-success m-b-10 m-1-5"
                                    style="border-radius: 4px;margin-left: 50px">交 卷
                            </button>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </section>
    <div th:replace="common/common.html::common_footer"></div>
</div>
<div th:replace="common/common.html::common_js">
</div>
</body>
</html>